﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Industrial SlickGrid Sample</title>    
     <style type="text/css">        
        body{background:#2C2C2C;margin:0px;top:0px;left:0px;font-family:Calibri,Microsoft Sans-Serif Serif,Tahoma;font-style:normal;font-weight:normal;font-size:12px;color:#171717;}
        .template{background:#E8E8E8;min-width:900px;width:90%;min-height:450px;height:auto;border:1px dotted #A4A2A2;margin-top:2%;padding-bottom:25px;}
        .template .titleTemp{color:#E04E06;font-size:16px;font-weight:bold;text-align:left;margin-top:2.5%;min-width:550px;width:95%}
        .template .sample{background:#FFFFFF;min-width:850px;width:95%;min-height:575px;border:1px dotted #A4A2A2;padding-bottom:25px;}
        .template .content{background:#FFFFFF;min-width:550px;width:95%;margin-top:2.5%;min-height:50px;border:1px dotted #A4A2A2;padding-bottom:25px;}        
    </style>    
    <link href="/IndustrialDashboard/ForeignFiles/slickGrid/Styles/slick.grid.css" type="text/css" media="screen" charset="utf-8" rel="stylesheet"/>
    <link href="/IndustrialDashboard/ForeignFiles/jquery/Styles/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" charset="utf-8" rel="stylesheet"/>
    <link href="/IndustrialDashboard/ForeignFiles/slickGrid/Styles/examples.css" rel="stylesheet" type="text/css" />
    <link href="/IndustrialDashboard/Widgets/IndustrialSlickGrid/Styles/IndustrialSlickGrid.css" rel="stylesheet" type="text/css" />
    <link href="/IndustrialDashboard/Styles/IndustrialDashboard.css" rel="stylesheet" type="text/css"  />
    
    <script src="/IndustrialDashboard/Scripts/IndustrialDashboard.js" type="text/javascript"></script>      
   
    <script src="/IndustrialDashboard/ForeignFiles/jquery/Scripts/jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script>
	<script src="/IndustrialDashboard/ForeignFiles/jquery/Scripts/jquery.rule-1.0.1.1-min.js" type="text/javascript" language="javascript"></script>
	<script src="/IndustrialDashboard/ForeignFiles/jquery/Scripts/jquery.event.drag.custom.js" type="text/javascript" language="javascript"></script>
    <script src="/IndustrialDashboard/ForeignFiles/jquery/Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript" language="javascript"></script>

    <script src="/IndustrialDashboard/ForeignFiles/slickGrid/Scripts/slick.grid.js" type="text/javascript" language="javascript"></script>
    <script src="/IndustrialDashboard/ForeignFiles/slickGrid/Scripts/slick.editors.js" type="text/javascript" language="javascript"></script>
    <script src="/IndustrialDashboard/Widgets/IndustrialSlickGrid/Scripts/IndustrialSlickGrid.js" language="javascript" type="text/javascript"></script>  

    <style type="text/css">        
        body{background:#909090; top:0px; left:0px; margin:0px;}
        div.style {width:250px;height:22px;margin-left:55%;margin-top:25px;font-family:Calibri,Microsoft Sans Serif;font-size:12px;position:absolute;}
        .style p {color:#303030;width:95px;float:left;margin-top:4px;}
        .style select{float:left;margin-left:5px;width:120px;font-size:12px;font-family:Calibri,Microsoft Sand Serif;}
        .menuContainer{margin-top:25px;height:auto; width:90%; padding:10px;}
    </style>   
</head>
<body>    
     <script language="javascript" type="text/javascript">
         var sg;
         window.onload = function () {
             //Set Initial Options, using "CallProcedure" method, also set the procedure.             
             var options = { 'URL': '/IndustrialDashboard/DALService.svc/CallProcedure', 'DatabaseParameters': { 'Procedure': 'dbo.spSlickGridDatas' }, Title: 'Industrial SlickGrid'
                , Title : 'Industrial SlickGrid Sample'
                , Attributes: { defaultColumnWidth: 130, enableColumnReorder: false, rowHeight: 20, enableCellNavigation: true
                                , editable: true, enableCellNavigation: true, AllowDelete: true
                }
             };
             //Create an Instance of Industrial SlickGrid
             slickEditorPath = '/IndustrialDashboard/ForeignFiles/slickGrid/Styles/images/';
             var sg = new IndustrialSlickGrid(document.getElementById('pSG'), options);

             //Refresh Widget
             sg.RefreshData();
         };
    </script>       
    <center>
        <div class="template">
            <center>
                <div class="titleTemp">Sample</div>
                <div class="sample">                    
                    <div id="pSG" style="position:relative;height:550px;width:71%;margin-top:25px;left:0px;margin-left:1%;"></div>                                    
                </div>
                <div class="content" style='text-align:left;padding:20px;width:92%;'>
                    <p> In this example, the javascript code needed to invoke the stored procedure <i>dbo.spSlickGridDatas</i> is:  </p>
                    <pre style='background-color:#E0E0F0;width:98%;'>                    
                        attachDomReadyEventHandler(function() {                            
                            var options = { 'URL': '/IndustrialDashboard/DALService.svc/CallProcedure', 'DatabaseParameters': { 'Procedure': ' <span style='color:red '>'dbo.spSlickGridDatas'</span> }, Title: 'Industrial SlickGrid'
                                , Title : 'Industrial SlickGrid Sample'
                                , Attributes: { defaultColumnWidth: 130, enableColumnReorder: false, rowHeight: 20, enableCellNavigation: true
                                                , editable: true, enableCellNavigation: true, AllowDelete: true
                                }
                             };
                            //Source path
                            slickEditorPath = '/IndustrialDashboard/ForeignFiles/slickGrid/Styles/images/';
                            //Create an Instance of Industrial SlickGrid
                            sg = new IndustrialSlickGrid(document.getElementById('pSG'), options);
                            //Refresh Widget
                            sg.RefreshData();
                        });

                        
                    </pre>
                </div>
            </center>
        </div>
    </center>  
</body>
</html>                                
